<template>
  <div>//js es6 模板字符串 模板字面量</div>
  <div v-html="c2"></div>
  <div>{{ d }}</div>
  <div>{{ e }}</div>
  <div>{{ e1 }}</div>
  <div>{{ e2 }}</div>
</template>

<script setup>
const a = 'hello'
const b = 'world'
const c = a + ' ' + b
const color = 'red'
const c1 = '<h1 style="color:' + color + '"' + '>标题1' + a + ' ' + b + '</h1>'
console.log('c1', c1)

//esc下面一个
const c2 = `<h1 style='color:${color}'>标题1${a} ${b}</h1>`
console.log('c2', c2)

//阻止插值
const d = `测试 \${a}`

const dFunc = () => {
  return '函数'
}
const e = `测试 \`${dFunc()}\``

//标签函数
const tagFunc = (strings, a, b) => {
  console.log('strings', strings)
  console.log('a', a)
  console.log('b', b)
  return `${a} ${b} 其他不要了`
}
const e1 = tagFunc`测试123 ${a} ${b} 结束了`

//嵌套模板
const num = 5
const num1 = 6
const e2 = `${num > num1 ? `${num}` : `${num1}`}`
</script>

<style scoped></style>
